<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<h1>对象语法</h1>

<div id="v1" v-bind:class="{ active: isActive}"> Class对象语法（单个）</div>

<div id="v2" class="static" v-bind:class="{ active: isActive, 'text-danger':hasError}">Class语法对象(对个)</div>

<div id="v3" v-bind:class="classObject">Class直接绑定一个对象</div>

<div id="v4" v-bind:class="classObject">Class 计算属性绑定</div>
<script>
    var v1=new Vue({
        el:'#v1',
        data:{
            isActive:true
        }
    })

    var v2=new Vue({
        el:'#v2',
        data:{
            isActive:true,
            hasError:false
        }
    })

    var v3=new Vue({
        el:'#v3',
        data:{
            classObject:{
                active:false,
                'text-danger':false
            }
        }
    })

    var v4=new Vue({
        el:'#v4',
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObject:function () {
                return{
                    active:this.isActive && !this.error,
                    'text-danger':this.error && this.error.type=== 'fatal'

                }

            }
        }
    })

</script>
<h1>数组语法</h1>
<div id="v5" v-bind:class="[activeClass, errorClass]">Class绑定 数组语法</div>
<div id="v6" v-bind:class="[{active: isActive},errorClass]">Class绑定数组中包含对象</div>
<script>

    var v5=new Vue({
        el:'#v5',
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

    var v6=new Vue({
        el:'#v6',
        data:{
            isActive:true,
            errorClass:'text-danger'
        }
    })

</script>

<h1>用在组件上</h1>
<div id="v7">
    <my-component v-bind:class="{ active: isActive}"></my-component>
</div>

<script>
    Vue.component('my-component', {
        template: '<p class="foo bar">Hi</p>'
    });

    var v7=new Vue({
        el:'#v7',
        data:{
            isActive:true
        }
    })

</script>


</body>
</html>